@section("header")
    <link rel="stylesheet" href="{{asset(env('CDN_HOST')."/public/css/commodity/header_nav.css")}}">
    <nav id="header" class="header">
        <div class="header-top">
            <div class="htop_div htop_index">
                <i class="fa htop-fa fa-home" aria-hidden="true"></i>
            </div>
            <div class="htop_div htop_logo">
                一冉再的商城
            </div>
            <div class="htop_div htop_search">
                <i class="fa htop-fa fa-search" aria-hidden="true"></i>
            </div>
            <div class="htop_div htop_cart">
                <i class="fa htop-fa fa-shopping-cart" aria-hidden="true"></i>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="header-wp">
            <div class="hots-bar">
                <div class="hots-wp">
                    <div class="hots-cnt">
                        <div class="clearfix hots-bd">
                            @foreach($classify as $key => $value)
                                <a href="javascript:;" class="hot"
                                   data-id="{{$value['commodity_classify_id']}}">{{$value['classify_name']}}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div style="clear: both;height: 14vh;width: 100vw;"></div>
    <script>
        $(".hot").on('click', function () {
            loading.show()
            var $a = $(this)
            $.post('/api/get_commodity_by_classify',
                {
                    _token: csrf_token,
                    classify: $a.attr('data-id')
                },
                function (data) {
                    if (data.errorCode == 0)
                        commodity_load(data.data)
                    else
                        $('ul.main-ul').html('<div class="nothing">该分类下暂无商品</div>')
                    $(".hot").attr("class", "hot")
                    $a.attr("class", "hot hot-active")
                    loading.hide()
                }, 'json')

        })

        function commodity_load(data) {
            var html = ''
            for (v in data) {
                html += '<a href="/commodity/' + data[v].commodity_id + '"><li class="main-li commodity-box" data-id="' + data[v].commodity_id + '">\n' +
                    '                    <div class="commodity-img">\n' +
                    '                        <img class="box-img" src="' + data[v].index_img_url + '" alt="' + data[v].commodity_name + '">\n' +
                    '                    </div>\n' +
                    '                    <div class="commodity-info overflow_hidder">\n' +
                    '                        ' + data[v].commodity_name + '\n' +
                    '                    </div>\n' +
                    '                    <div class="commodity-price">\n' +
                    '                        <span>¥</span><span>' + data[v].commodity_info_price + '</span>\n' +
                    '                    </div>\n' +
                    '                </li></a>'
            }
            $('ul.main-ul').html(html)
        }

        $(".htop_search").click(function () {
            loading.show()
            window.location.href = '/search'
        })
        $(".htop_cart").click(function () {
            loading.show()
            window.location.href = '/cart'
        })
        $(".htop_index").click(function () {
            loading.show()
            window.location.href = '/'
        })
        $(".hot").eq(0).click()
    </script>
@endsection